<!-- 项目成员弹窗 -->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    width="50%"
    draggable
    overflow
    @close="handleClose"
  >
    <template #header>
      <span>项目详情</span>
      <el-button
        style="float: right"
        size="small"
        color="#1E3485"
        :icon="Edit"
        @click="showContactSelectDialog()"
        >选择人员</el-button
      >
    </template>
    <div class="crossRope" />
    <vxe-table
      border
      min-height="300px"
      max-height="450px"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      :loading="tableLoading"
      size="mini"
      style="margin-top: 2%"
    >
      <vxe-column
        type="seq"
        title="序号"
        min-width="50"
        align="center"
        fixed="left"
      />
      <vxe-column
        v-for="column in tableColumns"
        :key="column.field"
        :field="column.field"
        :title="column.title"
        :min-width="column.width"
        align="center"
        show-overflow
      >
        <template v-slot:default="{ row }">
          {{ row[column.field] }}
        </template>
      </vxe-column>
      <vxe-column title="操作" min-width="120" align="center" fixed="right">
        <template v-slot:default="{ row }">
          <vxe-button
            type="text"
            size="small"
            @click="deleteProjectMember(row.id)"
            >删除</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <div class="dialogs">
      <contactsSelectDialog
        :visible="contactSelectDialogVisible"
        :projectId="projectId"
        @close="closeContactSelectDialog"
        @confirm="contactSelectConfirm"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElDialog, ElMessage, ElMessageBox } from "element-plus";
import { Edit } from "@element-plus/icons-vue";
import contactsSelectDialog from "./contactsSelectDialog.vue";
import {
  getProjectMemberList,
  delProjectMember,
  saveProjectMember
} from "@/api/ERP_baseMessage";

///////////////////////// 公共 /////////////////////////
// 弹窗关闭/打开
const props = defineProps({
  visible: Boolean,
  id: String
});
const dialogFormVisible = ref(false);
const emit = defineEmits(["close"]);
function handleClose() {
  emit("close", false);
}
watch(
  () => props.visible,
  val => {
    dialogFormVisible.value = val;
  },
  { immediate: true }
);
///////////////////////// 数据准备 /////////////////////////
// 公共数据
let projectId = ref("");
// 表格数据
let tableData = ref([]);
let tableLoading = ref(false);
let tableColumns = reactive([
  {
    field: "userName",
    title: "登录账户",
    width: 120
  },
  {
    field: "realName",
    title: "姓名",
    width: 120
  },
  {
    field: "deptName",
    title: "所在单位",
    width: 120
  },
  {
    field: "roleName",
    title: "角色",
    width: 120
  }
]);
///////////////////////// 弹窗类 /////////////////////////
// 选择人员弹窗
let contactSelectDialogVisible = ref(false);
function showContactSelectDialog() {
  contactSelectDialogVisible.value = true;
}
function closeContactSelectDialog(val: boolean) {
  contactSelectDialogVisible.value = val;
}
const contactSelectConfirm = async (data: any) => {
  tableLoading.value = true;
  let params: ApiParams = {};
  params.projectId = data.projectId;
  params.idList = data.idList;
  try {
    const response: ApiResponse = await saveProjectMember(params);
    if (response.code === 200) {
      ElMessage.success("保存成功");
      getList();
    } else {
      ElMessage.error("保存失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    tableLoading.value = false;
  }
};
///////////////////////// 数据请求 /////////////////////////
// 获取项目成员列表
async function getList() {
  tableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  params.projectId = projectId.value;
  try {
    const response: ApiResponse = await getProjectMemberList(params);
    if (response.code === 200) {
      tableData.value = response.data.records;
    } else {
      ElMessage.error("获取项目成员列表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    tableLoading.value = false;
  }
}
// 删除项目成员
async function deleteProjectMember(id: any) {
  ElMessageBox.confirm("确定删除该项目成员？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    tableLoading.value = true;
    let params: ApiParams = {};
    params.id = id;
    try {
      const response: ApiResponse = await delProjectMember(params);
      if (response.code === 200) {
        ElMessage.success("删除成功");
        getList();
      } else {
        ElMessage.error("删除失败: " + response.msg);
      }
    } catch (error) {
    } finally {
      tableLoading.value = false;
    }
  });
}
///////////////////////// 公共 /////////////////////////
// 获取详情
watch(dialogFormVisible, newValue => {
  if (newValue) {
    projectId.value = props.id;
    getList();
  }
});
</script>

<style lang="scss" scoped></style>
